<template>
  <div>
    <InfoCard m-20>
      <template #icon>
        <i-ep-success-filled v-if="isSuccess" color-green size-36 />
        <i-ep-circle-close-filled v-else color-red size-36 />
      </template>
      <template #content>
        <div flex-col>
          <div mb-4>
            <span mr-4>正常数据条数:</span>
            <span color-green>{{ normalCount }}条</span>
          </div>
          <div>
            <span mr-4>异常数据条数:</span>
            <span color-red>{{ abnormalCount }}条</span>
          </div>
        </div>
      </template>
    </InfoCard>

    <!-- 异常提示 -->
    <div v-if="!isSuccess" m-20 p-20 bg-gray-100>
      <div flex-col>
        <div text-16 font-medium>异常提示</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import InfoCard from './info-card.vue'

defineProps({
  isSuccess: {
    type: Boolean,
    default: false,
  },
  normalCount: {
    type: Number,
    default: 0,
  },
  abnormalCount: {
    type: Number,
    default: 0,
  },
})
</script>
